<!DOCTYPE html>
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Diary</title>
	
		<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" type="text/css" media="screen" />

		<meta name="viewport" content="width=640" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="apple-mobile-web-app-capable" content="yes" />

		<link rel="apple-touch-icon" sizes="120x120" href="img/index-icon.png" />
	</head>
	<body>

		<!-- Turn.js Markup Anfang -->
		<div id="diary">
			<div style="background-image:url(img/1.png);" class="hard"></div>
			<div style="background-image:url(img/2.png);">
				<div class="handWriting">



					<!-- 06.1 AUFGABE ENDE -->

					<div id="vimeo06-1">
						<!-- 06.1 AUFGABE START -->
						<span class="socialChannel">Aufgabe</span><br />
						Suche nach Hinweisen:
						<ul class="tasks">
							<li class="hbf">F Hauptbahnhof</li>
							<li class="paulskirche">Paulskirche</li>
							<li class="museum">Museum</li>
						</ul>

						<div class="content-media">
							<button onclick="getLocation()" class="button123">Ich bin vor Ort</button>
							<div id="mapholder"></div>
						</div>
					</div>
					<!-- 06.1 AUFGABE ENDE -->

					<!-- 06.2 AUFGABE START -->
					<div id="vimeo06-2">
						<span class="socialChannel">Aufgabe</span><br />

						Hauptbahnhof: Auf welches Objekt schauen die Adler?

						<form id="passCheckForm">
							<input class="input" id="pwd" name="" type="text" value="A" />
							<button id="btnSubmit" class="ok">OK</button>
						</form>
						<hr />
					</div>
					<!-- 06.2 AUFGABE ENDE -->

					<!-- 05 VIMEO START -->
					<div id="vimeo05">
						<span class="socialChannel">Vimeo</span><br />
						B&uuml;cherei gefunden. Wir suchen nun einen alten Schatz. Über Frankfurt sind Hinweise verteilt. Ich muss mich verstecken.
						<div class="content-media"><a target="_blank" href="https://vimeo.com/81719238"><img class="bild" src="img/content/vimeo.jpg"></a></div>
						<hr />
					</div>
					<!-- 05 VIMEO ENDE -->

					<!-- 06 AUFGABE START -->
					<span class="socialChannel">Aufgabe</span><br />
					Wo k&ouml;nnte ich den Freund von Dad finden? Seine Skypenr.: +99123456789 <br /><br />
					Vielleicht kann mir jemand helfen? <br /><br />
					Die L&ouml;sung: <br />
					Koordinaten bei <a target="_blank" href="http://gmaps-samples.googlecode.com/svn/trunk/geocoder/singlegeocode.html">Google Maps.</a><br />

					<input class="input" name="bibolat" type="text" value="50.131586,8.683675" readonly>

					<div class="content-media"><img class="bild" src="http://maps.googleapis.com/maps/api/staticmap?center=50.131586,8.683675&zoom=14&size=440x235&sensor=false"></img></div>
					B&uuml;cherei Frankfurt
					<hr />
					<!-- 06 AUFGABE ENDE -->


					<!-- 05 VIMEO START -->
					<span class="socialChannel">Vimeo</span><br />
					Mein Vater ist verschwunden. Sein B&uuml;ro wurde verw&uuml;stet und in seinem Notizbuch war der Name eines Freundes notiert. Ich muss ihn treffen.
					<div class="content-media"><a href="https://vimeo.com/81719238" target="_blank"><img class="bild" src="img/content/vimeo.jpg"></a></div>
					<div class="content-tesa"></div><img class="content-picture" src="img/content/office.jpg" alt="" width="477" height="383" />
					<hr />
					<!-- 05 VIMEO ENDE -->


					<!-- 04 FACEBOOK START -->
					<span class="socialChannel">Facebook</span><br />
					Ich benötige Hilfe. Ich hoffe, dass sich viele Leute meine neues Video anschauen und dem Aufruf folgen!
					<hr />
					<!-- 04 FACEBOOK ENDE -->


					<!-- 03 FACEBOOK START -->
					<span class="socialChannel">Facebook</span><br />
					Hey zusammen! Ich habe ab heute meinen eigenen Videoblog gestartet. Dort will ich in Zukunft Neuigkeiten aus meinem Leben ver&ouml;ffentlichen. Stay tuned!!!
					<div class="content-tesa"></div><img class="content-picture" src="img/content/webcam.jpg" alt="" width="477" height="383" />
					<hr />
					<!-- 03 FACEBOOK ENDE -->


					<!-- 02 FACEBOOK START -->
					<span class="socialChannel">Facebook</span><br />
					Wir sind endlich in F am Main angekommen. Coole Reise und das Haus ist auch schon eingerichtet. Morgen f&auml;ngt die neue Schule an ;-)
					<div class="content-tesa"></div><img class="content-picture" src="img/content/frankfurt.jpg" alt="" width="477" height="383" />
					<hr />
					<!-- 02 FACEBOOK ENDE -->


					<!-- 01 FACEBOOK START -->
					<span class="socialChannel">Facebook</span><br />
					Mein Dad und ich ziehen heute nach Frankfurt um! Die Sachen sind gepackt!
					<div class="content-tesa"></div><img class="content-picture" src="img/content/umzug.jpg" alt="" width="477" height="383" />
					<hr />
					<!-- 01 FACEBOOK ENDE -->

				</div>
				<div class="menuSlideFromTop">
					<div class="codehilite" style="display:none;"><pre><span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.squiggle-animated path'</span><span class="p">);</span>
	<span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">getTotalLength</span><span class="p">();</span>
	<span class="c1">// Clear any previous transition</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">transition</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">WebkitTransition</span> <span class="o">=</span>
	  <span class="s1">'none'</span><span class="p">;</span>
	<span class="c1">// Set up the starting positions</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDasharray</span> <span class="o">=</span> <span class="nx">length</span> <span class="o">+</span> <span class="s1">' '</span> <span class="o">+</span> <span class="nx">length</span><span class="p">;</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDashoffset</span> <span class="o">=</span> <span class="nx">length</span><span class="p">;</span>
	<span class="c1">// Trigger a layout so styles are calculated &amp; the browser</span>
	<span class="c1">// picks up the starting position before animating</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
	<span class="c1">// Define our transition</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">transition</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">WebkitTransition</span> <span class="o">=</span>
	  <span class="s1">'stroke-dashoffset 2s ease-in-out'</span><span class="p">;</span>
	<span class="c1">// Go!</span>
	<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDashoffset</span> <span class="o">=</span> <span class="s1">'0'</span><span class="p">;</span>
	</pre></div>
					<div class="squiggle-container squiggle-animated">
						<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 width="640px" height="1136px" viewBox="0 0 640 1136" enable-background="new 0 0 640 1136" xml:space="preserve">
	<path fill="none" stroke="#4D4D4D" stroke-miterlimit="10" d="M510.581,880.076c-2.469,6.036-25.245,7.089-32.97,8.631
		c-13.322,2.66-26.9,1.868-40.527,1.868c-26.958,0-51.901-0.592-76.83-7.494c-22.575-6.25-60.948,4.197-80.662-8.97
		c-21.672-14.477-17.364-46.041,0.411-61.198c18.44-15.725,45.595-20.858,66.757-33.004c11.962-6.865,21.592-16.803,33.326-23.993
		c10.616-6.505,23.67-9.9,33.405-16.505c19.773-13.414,21.563-34.714-3.329-43.826c-30.712-11.243-74.285,2.411-106.273-0.334
		c-25.303-2.171-52.388-8.29-60.213-35.635c-7.208-25.187,13.865-59.856,27.933-79.781c16.671-23.614,48.439-37.676,72.557-52.652
		c24.873-15.446,62.629-34.212,79.785-57.675c14.308-19.566,9.276-52.51-7.454-68.284c-18.198-17.159-42.624-18.034-60.074-34.122
		c-31.316-28.873-39.344-58.254-5.288-88.747c20.414-18.277,41.763-32.258,64.986-47.448c7.927-5.185,31.49-25.302,37.463-21.298"/>
						</svg>
						<div id="mapElementsWrapper">
							<div id="mapElement-jetzt" class="mapElements"></div>
							<div id="mapElement-headline" class="mapElements"></div>
							<div id="mapElement-steg" class="mapElements"></div>
							<div id="mapElement-dom" class="mapElements"></div>
							<div id="mapElement-museum2" class="mapElements"></div>
							<div id="mapElement-museum1" class="mapElements"></div>
							<div id="mapElement-bahn" class="mapElements"></div>
							<div id="mapElement-paul" class="mapElements"></div>
							<div id="mapElement-entfuehrt" class="mapElements"></div>
							<div id="mapElement-buecherei" class="mapElements"></div>
							<div id="mapElement-start" class="mapElements"></div>
						</div>
					</div>
					<p style="display: none;"><button class="squiggle-go btn">Make it so!</button></p>
				</div>
			</div>
		</div>
		<!-- Turn.js Markup Ende -->

		<!-- Initialisierung des jQuery Custom Scrollbar Scripts -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="js/turn.min.js" type="text/javascript"></script>
		<script src="js/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
	</body>
</html>